<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    #animate_div{
         width: 200px;
         height: 200px;
         background-color: blueviolet;
         position: absolute;
       left: 0px;
       top: 100px;
    }
</style>
<script src="./缓动动画模版.js"></script>
<body>
    <div id="animate_div"></div>
    <button id="ani_800">去往800</button>
    <button id="ani_300">去往300</button>
  <script>
      let div=document.querySelector("#animate_div");
      let btn1=document.querySelector("#ani_800");
      let btn2=document.querySelector("#ani_300");
      btn1.addEventListener("click",()=>{
           animate(div,800,()=>{div.style.background="red"});
      })
      btn2.addEventListener("click",()=>{
           animate(div,300,()=>{div.style.background="black"});
      })
  </script>
</body>
</html>